.course-more-container{
  min-height: 100%;
  box-sizing: border-box;
  padding-top: 55px;
  padding-bottom: 120px;
  background-color: #eff3f5;
  position: relative;
  .content-box{
    padding: 20px 180px;
    .content{
      background-color: #fff;
      padding: 10px;
      border-radius: 3px;
      .mode-main {
        width    : 100%;
        display  : flex;
        flex-wrap: wrap;
        .mode-item {
          cursor          : pointer;
          border-radius   : 3px;
          background-color: #fff;
          margin-bottom   : 20px;
          padding         : 10px;
          width           : 24%;
          position: relative;
          .image-box{
            width: 100%;
            height: auto;
            background-color: rgb(127, 83, 220);
            img {
              width : 100%;
              height: auto;
            }
          }
          
          h3 {
            font-weight: bold;
          }
          p {
            color: #ccc;
          }
          .item-bottom {
            font-size      : 12px;
            display        : flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0 !important;
          }
          .sort{
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 50%;
            font-weight: bold;
            color: #fff;
            background: rgba(197, 194, 201, 0.5);
            position: absolute;
            top: 20px;
            right: 20px;
          }
          transition-duration: 0.5s
        }
        .mode-item:not(:nth-child(4n)) {
          margin-right: calc(4% / 3);
        }
        .mode-item:hover{
          box-shadow: 0 0 10px #999;
        }
      }
    }
    .page-box{
      width: 100%;
      margin: 20px auto;
      display: flex;
      justify-content: center;
    }
  }
}